.creator {
  padding: 5% 0px;
  width: 80%;
  margin: auto;
  height: -webkit-fill-available;

  &__header {
    border-top: 1px solid var(--borders);
    border-left: 1px solid var(--borders);
    border-right: 1px solid var(--borders);
  }

  &__body {
    display: grid;
    grid-template-columns: 1fr 30%;
    grid-template-rows: 1fr 50px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: overlay;
    background: var(--bg-panel);
    padding: 20px 30px;
    height: 80%;
    border-bottom: 1px solid var(--borders);
    border-left: 1px solid var(--borders);
    border-right: 1px solid var(--borders);

    &::-webkit-scrollbar {
      width: 0px;
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      width: 0;
      background: transparent;
    }

    &_left {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 30px 30px 1fr;
      grid-template-areas:
        "a b"
        "c d"
        "e e";
    }

    &_zoom {
      padding: 10px 20px 0 0;
    }

    &_buttons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  &_view {
    grid-area: e;
    height: 50vmin;
    margin: 20px 20px 0 0;
    padding: 20px;
    overflow: auto;
    background-color: #ffffff;

    &::-webkit-scrollbar {
      width: 0px;
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      width: 0;
      background: transparent;
    }
  }

  &_list {
    height: 58vmin;

    &_item {
      display: grid;
      grid-template-columns: 40px 1fr;
    }
  }
}
